/**
* 分页组件
*/ 
<template>
  <el-pagination class="page-box" 
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange" 
    background 
    :current-page="childMsg.page" 
    :page-sizes="[10, 20, 30, 40]" 
    :page-size="childMsg.perPage" 
    layout="total, sizes, prev, pager, next, jumper" 
    :total="childMsg.total">
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['childMsg'],
  data() {
    return {
      pageparm: {
        page: this.childMsg.page,
        perPage: this.childMsg.perPage
      }
    }
  },

  methods: {
    handleSizeChange(val) {
      this.pageparm.perPage = val
      this.$emit('callFather', this.pageparm)
    },
    handleCurrentChange(val) {
      this.pageparm.page = val
      this.$emit('callFather', this.pageparm)
    }
  }
}
</script>

<style>
.page-box {
  padding: 10px 8px 0 8px;
}
</style>
